<template>
  <scroll-view class="album_scrollView" scroll-y @scrolltolower="handleToLower">
    <!-- 轮播图 开始 -->
    <view class="album_swiper">
      <swiper autoplay indicator-dots circular>
        <swiper-item v-for="item in banner" :key="item.id">
          <image :src="item.thumb"></image>
        </swiper-item>
      </swiper>
    </view>
    <!-- 轮播图 结束 -->
    <!-- 列表 开始 -->
    <view class="album_list">
      <navigator class="list_item" v-for="item in album" :key="item.id" :url="`/pages/album/index?id=${item.id}`">
        <view class="list_item_img">
          <image mode="aspectFill" :src="item.cover"></image>
        </view>
        <view class="list_item_info">
          <view class="info_name">{{ item.name }}</view>
          <view class="info_desc">{{ item.desc }}</view>
          <view class="info_btn">
            <view class="album_atteention">关注</view>
          </view>
        </view>
      </navigator>
    </view>
    <!-- 列表 结束 -->
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      params: {
        limit: 30,
        order: 'new',
        skip: 0
      },
      banner: [],
      album: [],
      hasMore: true
    }
  },
  mounted() {
    uni.setNavigationBarTitle({
      title: '首页-专辑'
    })
    this.getList()
  },
  methods: {
    getList() {
      this.request({
        url: 'image/v1/wallpaper/album',
        data: this.params
      }).then(res => {
        console.log(res)
        if (this.banner.length === 0) {
          this.banner = res.res.banner
        }
        if (res.res.album.length === 0) {
          this.hasMore = false
          uni.showToast({
            title: '没有数据了',
            icon: 'none'
          })
          return
        }
        this.album = [...this.album, ...res.res.album]
      })
    },
    handleToLower() {
      if (this.hasMore) {
        this.params.skip += this.params.limit
        this.getList()
      } else {
        uni.showToast({
          title: '没有数据了',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.album_scrollView {
  height: calc(100vh - 36px);
}

.album_swiper {
  swiper {
    height: calc(750rpx / (640 / 284));

    image {
      height: 100%;
    }
  }
}

.album_list {
  padding: 10rpx;

  .list_item {
    padding: 10rpx 0;
    display: flex;
    border-bottom: 2rpx solid #ddd;

    .list_item_img {
      flex: 1;
      padding: 10rpx;

      image {
        width: 200rpx;
        height: 200rpx;
      }
    }

    .list_item_info {
      flex: 2;
      padding: 0 10rpx;
      overflow: hidden;

      .info_name {
        font-size: 30rpx;
        color: #000;
        padding: 10rpx 0;
      }

      .info_desc {
        font-size: 24rpx;
        padding: 10rpx 0;

        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }

      .info_btn {
        padding: 10rpx;
        display: flex;
        justify-content: flex-end;

        .album_atteention {
          color: $color;
          border: 3rpx solid $color;
          padding: 10rpx 15rpx;
        }
      }
    }
  }
}
</style>
